<template>
    <div class="case-group" v-if="renderList.length">
        <div class="case-item" v-for="item in  renderList " :key="item.id" @click="onJumpPath(item)">
            <div class="case-item__image">
                <el-image fit="cover" lazy :src="item.file +
                    '?x-oss-process=image/watermark,image_' +
                    toBase64(
                        'water/logo_white.png?x-oss-process=image/resize,P_30'
                    ) +
                    ',g_center,t_60'
                    " :title="item.name" alt="北京华锐云空间" />
            </div>

            <div class="case-item__info">
                <div class="case-item__title hidden-lines-1" :title="item.name">
                    {{ item.name }}
                </div>
                <!-- <div
                    class="case-item__desc hidden-lines-2"
                    :title="item.synopsiscontent"
                >
                    {{ item.synopsiscontent }}
                </div> -->
            </div>
        </div>
    </div>
    <el-empty :image-size="150" v-else />
</template>
<script setup>
import { computed } from "vue";

const router = useRouter();
const props = defineProps({
    list: {
        type: [Array, Object],
        default: () => [],
    },
    keyword: {
        type: String,
        default: "",
    },
});

const renderList = computed(() => {
    const keyword = props.keyword;
    if (keyword) {
        return props.list.filter(
            (item) => item.name && item.name.includes(keyword)
        );
    } else {
        return props.list;
    }
});

const onJumpPath = (item) => {
    navigateTo("/caseDetail/" + item.id + ".html", {
        open: "_blank",
    });
    // if (item.url) window.open(item.url, "_blank");
};
</script>
<style lang="scss" scoped>
.case-group {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;

    .case-item {
        width: 380px;
        height: 250px;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        margin-right: 30px;
        margin-bottom: 30px;
        cursor: pointer;

        &:nth-of-type(3n) {
            margin-right: 0;
        }

        &__image {
            width: 100%;
            height: 190px;
            overflow: hidden;

            :deep(.el-image) {
                width: 100%;
                height: 100%;

                img {
                    transition: all 0.4s linear;

                    &:hover {
                        transform: scale(1.4);
                    }
                }
            }
        }

        &__info {
            padding: 20px 27px 0 17px;
        }

        &__title {
            color: #111;
        }

        &__desc {
            font-size: 14px;
            color: #666;
            margin-top: 10px;
        }
    }
}

.hidden-lines-1 {
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出部分 */
    text-overflow: ellipsis;
    /* 使用省略号表示溢出 */
}

.hidden-lines-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>
